<template>
  <div class="pagination">
    <el-pagination
      :pager-count="5"
      :current-page="pager.page"
      :page-size="pager.size"
      :page-sizes="pageSizes"
      :layout="layout"
      :total="pager.count"
      :hide-on-single-page="false"
      @size-change="sizeChange"
      @current-change="pageChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    modelValue: {
      type: Object,
      default: () => ({ page: 1, size: 15, count: 0 })
    },
    pageSizes: {
      type: Array,
      default: () => [15, 20, 30, 40]
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    }
  },
  data() {
    return {
      pager: {
        page: this.modelValue.page,
        size: this.modelValue.size,
        count: this.modelValue.count
      }
    }
  },
  watch: {
    // 监听 modelValue 变化，并同步到 pager
    modelValue: {
      handler(newVal) {
        this.pager = { ...newVal }
      },
      deep: true
    },
    // 监听 pager 变化，并通知父组件更新
    pager: {
      handler(newVal) {
        this.$emit('update:modelValue', { ...newVal })
      },
      deep: true
    }
  },
  methods: {
    sizeChange(size) {
      this.pager.page = 1
      this.pager.size = size
      this.$emit('change')
    },
    pageChange(page) {
      this.pager.page = page
      this.$emit('change')
    }
  }
}
</script>
